<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>

    <link rel="stylesheet" type="text/css" href="../css/aui2.1/aui.css" />
    <link rel="stylesheet" type="text/css" href="../script/swiper/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/icon/iconfont.css" />

    <style>
    body{background: #edf3f3;color:#757575;}
    .aui-bar-nav{background: #78e16b;}

    #search{position: absolute;z-index: 999;}
    .aui-searchbar{height:3rem;background: rgba(0,0,0,0);text-align: center;}
    .aui-searchbar-input{background: rgba(0,0,0,0.2);height:2rem;border-radius: 1rem;}
    .aui-searchbar-input input{height:2rem;padding-left:0.5rem;color:#fff;}
    .sousuo-icon{width:1.2rem;height:1.2rem;margin-top:0.4rem;margin-left:1rem;}
    .sousuo-tishi{line-height: 2rem;color:#fff;margin-left:0.5rem;}

    .swiper-slide{height:auto;}
    .aui-info-item{width:80%;margin-left:0.5rem;}
    .aui-notice{width:80%;}
    .aui-more{width:15%;text-align: center;}
    .bg-white{background: #fff;}
    .margin-b-5{margin-bottom: 0.5rem;}
    .aui-grid img{width:2rem;display: block;margin:0 auto;}
    .aui-grid [class*=aui-col-]{padding:0.5rem 0;}
    .type-title{color:#333;font-weight: bold;}

    /*商品*/
    .row-just{display: flex;justify-content: space-between;flex-wrap:wrap;padding:0 0.5rem;}
    .list-item-wrap{width:49%;background: #fff;border-radius: 0.3rem;padding:0.5rem;margin-bottom: 0.3rem;}
    .list-item-wrap img{width:70%;display: block;margin:0 auto;}

    .goods-title{font-size: 0.7rem;color:#333;text-align: center;}
    .goods-desc{font-size: 0.6rem;text-align: center;}
    .goods-price{border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;text-align: center;}
    .new-price{color:#fd632f;margin-right:0.5rem;}
    .old-price{color:#9a9a9a;}
    .goods-btn{width:70%;background: #81d074;box-shadow: 2px 2px 2px #c7eac2;color:#fff;font-size: 0.6rem;line-height: 1.2rem;text-align: center;border-radius: 0.6rem;margin: 0.5rem auto;}


    .col-just{padding:0 0.5rem;}
    .row-item-wrap{width:100%;background: #fff;padding:0.3rem;display: flex;margin-bottom: 0.3rem;border-radius: 0.3rem;}
    .pic-wrap{width:4rem;height:4rem;margin-right:0.5rem;}
    .pic-wrap img{border-radius: 0.3rem;}
    .shop-info{position: relative;width: calc(100% - 4rem);}
    .shop-title{font-size: 0.7rem;color:#333;}
    .shop-desc{font-size: 0.6rem;}
    .shop-price{color:#ff6330;position: absolute;bottom: 0;}
    .shop-btn{width:40%;background: #81d074;box-shadow: 2px 2px 2px #c7eac2;color:#fff;font-size: 0.6rem;line-height: 1.2rem;text-align: center;border-radius: 0.6rem;margin: 0.5rem auto;position: absolute;border-bottom: 0;right: 0.5rem;}

    .aui-margin-b-30{margin-bottom: 3rem;}
    .aui-bar-tab .aui-active{color:#80d174;}
    #footer{border-top: 1px solid #ddd;box-sizing: border-box;}
    #footer .iconfont{font-size: 1rem;}
    .aui-bar-tab .aui-bar-tab-label{font-size: 0.5rem;}

    .wawa{width:5rem;position: fixed;top:19rem;right:0;z-index: 999;}
    </style>
</head>

<body>
<header class="aui-bar aui-bar-nav">大汇嘉园</header>
<div class="aui-content aui-margin-b-30">

    <div class="aui-searchbar" id="search">
        <div class="aui-searchbar-input aui-border-radius">
            <img class="sousuo-icon" src="../image/search.png" alt="">
            <input type="text" placeholder="请输入您搜索的商品">
            <!-- <span class="sousuo-tishi">请输入您搜索的商品</span> -->
        </div>
    </div>
    <!-- 幻灯片 -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../image/banner.png" alt=""></div>
        <div class="swiper-slide"><img src="../image/banner.png" alt=""></div>
        <div class="swiper-slide"><img src="../image/banner.png" alt=""></div>
        <div class="swiper-slide"><img src="../image/banner.png" alt=""></div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
    </div>
    <!-- 公告 -->
    <div class="aui-info bg-white margin-b-5">
        <div class="aui-info-item aui-notice">
            <img src="../image/new_12.png" style="width:1rem"/>
            <span class="aui-margin-l-5 aui-font-size-12 aui-ellipsis-1" style="width:calc(100% - 1rem);">关于买五谷这件事,在大汇嘉园有丰富的选择关于买五谷这件事,在大汇嘉园有丰富的选择</span>
        </div>
        <div class="aui-info-item aui-font-size-12 aui-more">更多》</div>
    </div>
    <!-- 宫格按钮 -->
    <section class="aui-grid margin-b-5">
      <div class="aui-row">
        <div class="aui-col-xs-3">
          <img src="../image/icon_11.png" alt="">
          <div class="aui-grid-label">果蔬采摘</div>
        </div>
        <div class="aui-col-xs-3">
          <img src="../image/icon_13.png" alt="">
          <div class="aui-grid-label">农副产品</div>
        </div>
        <div class="aui-col-xs-3">
          <img src="../image/icon_15.png" alt="">
          <div class="aui-grid-label">特色餐饮</div>
        </div>
        <div class="aui-col-xs-3">
          <img src="../image/icon_17.png" alt="">
          <div class="aui-grid-label">烧烤垂钓</div>
        </div>
        <div class="aui-col-xs-3">
          <img src="../image/icon_29.png" alt="">
          <div class="aui-grid-label">婚纱摄影</div>
        </div>
        <div class="aui-col-xs-3">
          <img src="../image/icon_31.png" alt="">
          <div class="aui-grid-label">婚礼婚宴</div>
        </div>
        <div class="aui-col-xs-3">
          <img src="../image/icon_33.png" alt="">
          <div class="aui-grid-label">亲子乐园</div>
        </div>
        <div class="aui-col-xs-3">
          <img src="../image/icon_35.png" alt="">
          <div class="aui-grid-label">文章中心</div>
        </div>

      </div>
    </section>
    <!-- 广告图 -->
    <img src="../image/adv.png" alt="">
    <!-- 娃娃 -->
    <div class="wawa" onclick="supplementCenter()">
      <img src="../image/wawa.png" alt="">
    </div>
    <!-- 新鲜水果 -->
    <div class="aui-info">
        <div class="aui-info-item aui-notice">
            <img src="../image/min-icon_05.png" style="width:1rem"/>
            <span class="aui-margin-l-5 aui-font-size-14 type-title">新鲜水果</span>
        </div>
        <div class="aui-info-item aui-font-size-12 aui-more">更多》</div>
    </div>
    <div class="row-just">
      <div class="list-item-wrap">
        <img src="../image/pic_05.png" alt="">
        <div class="goods-title">奶油草莓俩斤装</div>
        <div class="goods-desc aui-margin-b-10">肉质细腻，果汁丰盈</div>
        <div class="goods-price"><span class="new-price">￥9.9</span><span class="old-price">￥12</span></div>
        <div class="goods-btn">立即购买</div>
      </div>
      <div class="list-item-wrap">
        <img src="../image/pic_05.png" alt="">
        <div class="goods-title">奶油草莓俩斤装</div>
        <div class="goods-desc aui-margin-b-10">肉质细腻，果汁丰盈</div>
        <div class="goods-price"><span class="new-price">￥9.9</span><span class="old-price">￥12</span></div>
        <div class="goods-btn">立即购买</div>
      </div>
      <div class="list-item-wrap">
        <img src="../image/pic_05.png" alt="">
        <div class="goods-title">奶油草莓俩斤装</div>
        <div class="goods-desc aui-margin-b-10">肉质细腻，果汁丰盈</div>
        <div class="goods-price"><span class="new-price">￥9.9</span><span class="old-price">￥12</span></div>
        <div class="goods-btn">立即购买</div>
      </div>
    </div>

    <!-- 礼盒套餐 -->
    <div class="aui-info">
        <div class="aui-info-item aui-notice">
            <img src="../image/min-icon_11.png" style="width:1rem"/>
            <span class="aui-margin-l-5 aui-font-size-14 type-title">新鲜水果</span>
        </div>
        <div class="aui-info-item aui-font-size-12 aui-more">更多》</div>
    </div>
    <div class="col-just">
      <div class="row-item-wrap">
        <div class="pic-wrap"><img src="../image/pic_05.png" alt=""></div>
        <div class="shop-info">
          <div class="shop-title">奶油核桃165g</div>
          <div class="shop-desc aui-ellipsis-1 ">零食坚果炒货山核桃仁套组</div>
          <div class="shop-price">￥95.00</div>
          <div class="shop-btn">立即购买</div>
        </div>
      </div>

      <div class="row-item-wrap">
        <div class="pic-wrap"><img src="../image/pic_05.png" alt=""></div>
        <div class="shop-info">
          <div class="shop-title">奶油核桃165g</div>
          <div class="shop-desc aui-ellipsis-1 ">零食坚果炒货山核桃仁套组</div>
          <div class="shop-price">￥95.00</div>
          <div class="shop-btn">立即购买</div>
        </div>
      </div>

    </div>

    <!-- 新鲜果蔬 -->
    <div class="aui-info">
        <div class="aui-info-item aui-notice">
            <img src="../image/min-icon_17.png" style="width:1rem"/>
            <span class="aui-margin-l-5 aui-font-size-14 type-title">新鲜水果</span>
        </div>
        <div class="aui-info-item aui-font-size-12 aui-more">更多》</div>
    </div>
    <div class="row-just">
      <div class="list-item-wrap">
        <img src="../image/pic_05.png" alt="">
        <div class="goods-title">奶油草莓俩斤装</div>
        <div class="goods-desc aui-margin-b-10">肉质细腻，果汁丰盈</div>
        <div class="goods-price"><span class="new-price">￥9.9</span><span class="old-price">￥12</span></div>
        <div class="goods-btn">立即购买</div>
      </div>
      <div class="list-item-wrap">
        <img src="../image/pic_05.png" alt="">
        <div class="goods-title">奶油草莓俩斤装</div>
        <div class="goods-desc aui-margin-b-10">肉质细腻，果汁丰盈</div>
        <div class="goods-price"><span class="new-price">￥9.9</span><span class="old-price">￥12</span></div>
        <div class="goods-btn">立即购买</div>
      </div>
      <div class="list-item-wrap">
        <img src="../image/pic_05.png" alt="">
        <div class="goods-title">奶油草莓俩斤装</div>
        <div class="goods-desc aui-margin-b-10">肉质细腻，果汁丰盈</div>
        <div class="goods-price"><span class="new-price">￥9.9</span><span class="old-price">￥12</span></div>
        <div class="goods-btn">立即购买</div>
      </div>
      <div class="list-item-wrap">
        <img src="../image/pic_05.png" alt="">
        <div class="goods-title">奶油草莓俩斤装</div>
        <div class="goods-desc aui-margin-b-10">肉质细腻，果汁丰盈</div>
        <div class="goods-price"><span class="new-price">￥9.9</span><span class="old-price">￥12</span></div>
        <div class="goods-btn">立即购买</div>
      </div>
      <div class="list-item-wrap">
        <img src="../image/pic_05.png" alt="">
        <div class="goods-title">奶油草莓俩斤装</div>
        <div class="goods-desc aui-margin-b-10">肉质细腻，果汁丰盈</div>
        <div class="goods-price"><span class="new-price">￥9.9</span><span class="old-price">￥12</span></div>
        <div class="goods-btn">立即购买</div>
      </div>
      <div class="list-item-wrap">
        <img src="../image/pic_05.png" alt="">
        <div class="goods-title">奶油草莓俩斤装</div>
        <div class="goods-desc aui-margin-b-10">肉质细腻，果汁丰盈</div>
        <div class="goods-price"><span class="new-price">￥9.9</span><span class="old-price">￥12</span></div>
        <div class="goods-btn">立即购买</div>
      </div>
      <div class="list-item-wrap">
        <img src="../image/pic_05.png" alt="">
        <div class="goods-title">奶油草莓俩斤装</div>
        <div class="goods-desc aui-margin-b-10">肉质细腻，果汁丰盈</div>
        <div class="goods-price"><span class="new-price">￥9.9</span><span class="old-price">￥12</span></div>
        <div class="goods-btn">立即购买</div>
      </div>
    </div>

    <!-- 农副产品 -->
    <div class="aui-info">
        <div class="aui-info-item aui-notice">
            <img src="../image/min-icon_23.png" style="width:1rem"/>
            <span class="aui-margin-l-5 aui-font-size-14 type-title">新鲜水果</span>
        </div>
        <div class="aui-info-item aui-font-size-12 aui-more">更多》</div>
    </div>
    <div class="col-just">
      <div class="row-item-wrap">
        <div class="pic-wrap"><img src="../image/pic_05.png" alt=""></div>
        <div class="shop-info">
          <div class="shop-title">奶油核桃165g</div>
          <div class="shop-desc aui-ellipsis-1 ">零食坚果炒货山核桃仁套组</div>
          <div class="shop-price">￥95.00</div>
          <div class="shop-btn">立即购买</div>
        </div>
      </div>

      <div class="row-item-wrap">
        <div class="pic-wrap"><img src="../image/pic_05.png" alt=""></div>
        <div class="shop-info">
          <div class="shop-title">奶油核桃165g</div>
          <div class="shop-desc aui-ellipsis-1 ">零食坚果炒货山核桃仁套组</div>
          <div class="shop-price">￥95.00</div>
          <div class="shop-btn">立即购买</div>
        </div>
      </div>

    </div>



</div>
<footer class="aui-bar aui-bar-tab" id="footer">
    <div class="aui-bar-tab-item  aui-active" tapmode>
        <i class="icon iconfont icon-weibiaoti--"></i>
        <div class="aui-bar-tab-label">首页</div>
    </div>
    <div class="aui-bar-tab-item" tapmode>
        <i class="icon iconfont icon-fenlei"></i>
        <div class="aui-bar-tab-label">分类</div>
    </div>
    <div class="aui-bar-tab-item" tapmode>
        <!-- <div class="aui-badge">2</div> -->
        <i class="icon iconfont icon-gouwucheman"></i>
        <div class="aui-bar-tab-label">购物车</div>
    </div>
    <div class="aui-bar-tab-item " tapmode>
        <i class="icon iconfont icon-wode"></i>
        <div class="aui-bar-tab-label">我的</div>
    </div>
</footer>
</body>

</html>
<script type="text/javascript" src="../script/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../script/swiper/swiper.min.js"></script>

<script type="text/javascript">
  $(function(){
    //幻灯片
    var swiper = new Swiper('.swiper-container', {
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      }
    });







  })

</script>
